<template>
  <div class="address-bar" :class="{'active':addr.uaddr_isdefault == 1}">
    <div>
      <div class="flex justify-between item-center dark text-left text-lg bold">
        <div class="flex item-center">
          <div>{{addr.uaddr_name}}</div>
          <div class="ml-10">{{addr.uaddr_province}}</div>
        </div>
        <div class="hand gray hover-red">×</div>
      </div>
      <div class="flex justify-between item-end mt-20">
        <div class="address-left">
          <div class="flex item-center text-sm">
            <div class="address-title text-right gray">收货人：</div>
            <div class="text-left dark">{{addr.uaddr_name}}</div>
          </div>
          <div class="flex item-center text-sm mt-10">
            <div class="address-title text-right gray">所在地区：</div>
            <div class="text-left dark">{{addr.uaddr_city}}</div>
          </div>
          <div class="flex item-center text-sm mt-10">
            <div class="address-title text-right gray">地址：</div>
            <div class="text-left dark">{{addr.uaddr_address}}</div>
          </div>
          <div class="flex item-center text-sm mt-10">
            <div class="address-title text-right gray">手机：</div>
            <div class="text-left dark">{{addr.uaddr_phone}}</div>
          </div>
        </div>
        <div class="address-right">
          <div class="text-right text-sm gray hover-red hand">编辑</div>
          <div class="text-right text-sm gray hover-red hand mt-10" @click="default_clicked(addr)">设为默认</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex'
  export default {
    props: ['addr'],
    computed: {
      ...mapState(['address'])
    },
    methods: {
      ...mapActions('address', ['update_address']),
      default_clicked(addr) {
        if (addr.uaddr_isdefault != 1) {
          addr.uaddr_isdefault = 1
          this.update_address(addr)
        }
      }
    }
  }
</script>

<style>
</style>
